<template>
	<view style="padding: 26rpx;">
		<view class="order_box" v-if="!is_null">
			<view class="one_order" v-for="(item,index) in orderData" :key="index">
				<view class="item_name_line" >
					<view class="item_name">{{item.package_item_name}}</view>
					<view class=""><text class="status">{{item.status_str}}</text></view>
				</view>
				<view class="time_info" style="margin-top: 16rpx;color: #ababab;">
					<view class="">
						<text>订单编号：{{item.order_no}}</text>
						
					</view>
					<view>下单时间：{{item.create_time}}</view>
					<view>到期时间：{{item.end_time}}</view>
					<view class="order_no_info">
						<view>订单类型：{{item.nums}} <text v-if="item.type == 1">小时</text><text v-if="item.type == 2">天</text><text style="padding: 0 8rpx;">X</text>{{item.buy_nums}}</view>
						<text class="price">￥{{item.total_price}}</text>
					</view>
				</view>
				
				<view class="bottom" v-if="item.status == 2000">
					<text class="login" style="margin-right: 10rpx;"  @click="xufeiFunc(item.id,item.package_id)">云机续费</text>
					<text class="login" @click="gotoLogin(item.id)">进入云机</text>
				</view>
			</view>
		</view>
		
		<view v-if="is_null">
			<view class="no_data">
				<image src="/static/no_record.png" mode="widthFix" class="image"></image>
				<view >{{$t('no_data')}}</view>
			</view>
		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
import {orderlist,authlogin} from "@/api/order.js";
export default {
	data() {
		return {
			orderData:[],
			 is_null:false
		}
	},
	onShow() {
		this.orderlistFunc();
	},
	methods: {
		orderlistFunc(){
			orderlist().then(res=>{
				if(res.code == 0){
					this.orderData = res.data;
					if(res.data.length >0){
						this.is_null = false;
					}else{
						this.is_null = true;
					}
					
				}else{
					if(res.code == -555){
						uni.$u.toast(res.msg)
					}
					this.orderData = [];
					this.is_null = true;
				}
			})
		},
		xufeiFunc(order_id,package_id){
			uni.navigateTo({
			  url: `/pages/index/xufei?order_id=${order_id}&package_id=${package_id}`
			});
		},
		gotoLogin(order_id){
			uni.showLoading({
				title:"正在登录"
			});
			authlogin({order_id:order_id}).then(res=>{
				uni.hideLoading();
				if(res.code == 0){
					var loginurl = res.data.phoneurl;
					uni.navigateTo({
					  url: '/pages/index/loginphone?url=' + encodeURIComponent(loginurl)
					});
				}else{
					uni.$u.toast(res.msg)
				}
				
			});
			
		}
	}
}
</script>

<style>
page{
	background-color: #f6f6f6;
}
.one_order{
	background-color: #fff;
	padding: 28rpx 28rpx;
	border-radius: 24rpx;
	margin-bottom: 24rpx;
}
.item_name_line{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.item_name{
	font-size: 34rpx;
	font-weight: 400;
}
.status{
	padding: 4rpx 18rpx;
	border-radius: 30rpx;
	border: 1rpx solid #746ef6;
	color: #746ef6;
	font-size: 28rpx;
}
.order_no_info{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.price{
	color: #000;
	font-size: 38rpx;
}
.time_info view{
	padding-bottom: 8rpx;
}
.bottom{
	border-top: 1rpx solid #f3eeee;
	margin-top: 8rpx;
	padding-top: 20rpx;
	display: flex;
	justify-content: flex-end;
}
.login{
	padding: 8rpx 24rpx;
	border-radius: 30rpx;
	background-color: #edae39;
	color: #fff;
}
.no_data{
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		font-size: 24rpx;
		color: #000;
		margin-top: 30%;
	}
	.no_data .image{
		width: 240rpx;
		height: auto;
		margin: auto;
	}
</style>
